{%extends "base.html"%}
{%block title%}Courses - {%endblock%}
{%block includes%}
<link type="text/css" rel="stylesheet" href="/static/yui/button/assets/skins/sam/button.css">
{%endblock%}
{%block body%}
<script type="text/javascript">
    YAHOO.namespace("example.container");

    function init() {
        // Define various event handlers for Dialog
        var handleSubmit = function() {
            this.submit();
        };
        var handleCancel = function() {
            this.cancel();
        };
        var handleSuccess = function(o) {
            window.location="/courses/{{semester.key.id}}";
        };
        var handleFailure = function(o) {
            alert("Submission failed: " + o.status);
        };

        // Instantiate the Dialog
        YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
                            { width : "30em",
                              fixedcenter : true,
                              visible : false, 
                              constraintoviewport : true,
                              buttons : [ { text:"Add", handler:handleSubmit, isDefault:true }, { text:"Cancel", handler:handleCancel, isDefault:false } ]
                            });

        // Wire up the success and failure handlers
        YAHOO.example.container.dialog1.callback = { success: handleSuccess, failure: handleFailure };

        // Render the Dialog
        YAHOO.example.container.dialog1.render();

        YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
        YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
    }

    YAHOO.util.Event.onDOMReady(init);
</script>
<h2>{{semester.name}} - All Courses</h2>
<div style="margin-bottom:20px;">
  List of Courses:
  <table>
    <tr>
      <th>Title</th>
      <th>Grade</th>
      <th>Hours</th>
      <th>Controls</th>
    </tr>
    {%for course in courses%}
    <tr>
      <td>
        <a href="{%url view.course.view course.key.id%}">{{course.title|escape}}</a> 
        {%if course.deptCode%}[{{course.deptCode}}:{{course.courseCode}}]{%endif%} 
        
      </td>
      <td>{{course.grade}}</td>
      <td>{{course.hours|floatformat:"-2"}}</td>
      <td align="center" class="delete">
        <a href="{%url view.course.edit course.key.id%}">edit</a> /
        <a class="yui-link-button" href="{%url view.course.delete course.key.id%}">delete</a>
      </td>
    </tr>
    {%endfor%}
    <tr>
    	<td colspan="2">GPA: <strong>
    	{% if semester.gpa %}
		  {{semester.gpa|floatformat:3}}
    	{% else %}
    	  -
    	{% endif %}
    	</strong></td>
    	<td>
    	{% if semester.semesterHours %}
    	  {{semester.semesterHours|floatformat}}
    	{% else %}
    	  -
    	{% endif %}
    	</td>
    	<td></td>
   	</tr>
  </table>
</div>
{% if user %}
<div style="margin:10px;">
  <button id="show" class="yui-button-focus">Add Course</button>
</div>
<div id="dialog1">
    <div class="hd">
        Enter Course
    </div>
    <div class="bd">
        <form action="{%url view.course.new%}" method="post">
          <input type="hidden" name="semesterid" value="{{semester.key.id}}">
          <table>
          {{form}}
                    <tr><td colspan=2><input type="submit"/></td></tr> <!-- todo: for testing only -->
          </table>
        </form>
    </div>
</div>
{% endif %}
{%endblock%}
